<i18n>
{
  "en": {
    "page_title": ""
  },
  "zh": {
    "page_title": ""
  }
}
</i18n>

<template>
  <el-container>
    <el-aside width="200px" class="aside-menu">
      <header class="tree-menu-title">方案目录</header>
      <el-tree
        :data="treeData"
        :props="{
          label: 'name',
          children: 'childList'
        }"
        accordion
        :default-checked-keys="selectKey"
        @node-click="handleNodeClick">
        <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
      </span>
      </el-tree>

    </el-aside>
    <el-main class="pt0 pr0">
      <Lists :currentCatalog="currentCatalog"></Lists>
    </el-main>
  </el-container>

</template>

<script>
  import Lists from './list'
  export default {
    data () {
      return {
        currentCatalog: {},
        selectKey: [],
        treeData: [],
        treeProps: {
          children: 'children',
          label: 'label'
        }
      };
    },

    created () {
      this.getProductCatalog();
    },
    components: {
      Lists
    },
    computed: {

    },
    methods: {
      // 获取方案目录树
      getProductCatalog () {
        this.$http({
          url: this.$http.adornUrl('/prm-os-srv-prod/product/programDir/queryProgramDirList'),
          method: 'post'
        }).then(({data}) => {
          this.treeData = data || []
          if (data.length > 0) {
            this.currentCatalog = data[0]
            this.selectKey = [data[0].id]
          }
        })
      },

      handleNodeClick (data) {
        this.currentCatalog = data
      }
    }
  }
</script>

<style scoped>
  .aside-menu {
    padding: 15px;
    border-radius: 4px;
    position: relative;
    box-shadow: 5px 0px 15px 0px rgba(0, 0, 0, 0.1);
  }

  .pr0 {
    padding-right: 0;
  }

  .pt0 {
    padding-top: 0;
  }

  .tree-menu-title {
    font-size: 18px;
    text-align: center;
    margin-bottom: 15px;
  }
</style>
